<template>
  <div class="songtheory">
    <van-cell
      is-link
      @click="showPopup()"
    >
      <slot>
        你知道这首歌居然被这么评论？
      </slot>
      <van-icon name="comment-o" />
    </van-cell>
    <van-popup
      v-model="show"
      round
      position="bottom"
      :style="{ height: '90%' }"
    >
      <div class="pl">
        <ul class="song-relate-tabs">
          <li
            v-for="(item , index) in tab"
            :key=index
            @click="ckeck(index)"
          ><span class="txt">{{item.name}}</span></li>
        </ul>
        <div class="m-moreSongs">
          <h2 class="u-title">喜欢这首歌的人也听</h2>
          <ul class="m-card-list">
            <li
              class="item"
              v-for="item in info"
              :key="item.id"
              @click="goDetail('/playmusicB',item.id),sx()"
            >
              <figure class="u-cover">
                <img
                  :src="item.album.blurPicUrl"
                  alt=""
                >
              </figure>
              <article class="f-fvc">
                <h3 class="f-thide">{{item.name}}</h3>
                <p class="sub f-thide">
                  {{item.artists[0].name}} - {{item.album.name}}
                </p>
              </article>
            </li>
          </ul>
        </div>
        <div class="m_newcomm">
          <h4 class="cmt_title">精彩评论</h4>
          <div class="cmt_list">
            <van-card
              v-for="item in com"
              :key="item.id"
              desc="2021年8月5日"
            >
              <template #thumb>
                <div class="userphoto">
                  <img
                    :src="item.user.avatarUrl"
                    alt=""
                  >
                </div>
              </template>
              <template #title>
                <span class="cmt_user">
                  <a href="">{{item.user.nickname}}</a>
                  <i class="vipassociator"></i>
                </span>
              </template>
              <template #num>
                <div class="cmt_like">
                  <span class="cmt_likearea">
                    <span class="cmt_count">{{item.likedCount}}</span>
                    <van-icon name="good-job-o" />
                  </span>
                </div>
              </template>
              <template #price>
                <div class="cmt_content">
                  <span class="cmt_text">
                    {{item.content}}
                  </span>
                </div>
              </template>
            </van-card>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { getInfo, getCom } from '@/api/cominfo.js'
export default {
  name: 'Songtheory',
  props: ['id'],
  data: () => ({
    show: false,
    num: 0,
    tab: [
      {
        name: '相似歌曲',
        active: false
      },
      {
        name: '精彩评论',
        active: false
      }
    ],
    info: [],
    com: []
  }),
  created() {
    this.getInfo()
    this.getCom()
  },
  methods: {
    ckeck(index) {
      this.num = index
    },
    showPopup() {
      this.show = true;
    },
    async getInfo() {
      const res = await getInfo(this.id)
      this.info = res.data.songs
      console.log(this.info[0])
    },
    async getCom() {
      const res = await getCom(this.id)
      console.log(res)
      this.com = res.data.hotComments
    },
    sx() {
      location.reload()
    }
  }
}
</script>
<style lang="less">
.songtheory {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 999;
  width: 100%;
  .van-cell {
    background: none;
    .van-cell__value {
      color: #fff;
      font-size: 14px;
    }
  }
  .van-cell__left-icon,
  .van-cell__right-icon {
    font-size: 0px;
  }
  .van-icon-comment-o {
    margin-left: 94px;
    font-size: 19px;
    vertical-align: middle;
  }
  .van-cell--clickable:active {
    background: none;
  }
  .pl {
    position: relative;
    .song-relate-tabs {
      position: relative;
      position: fixed;
      top: 62px;
      z-index: 10;
      flex: none;
      height: 58px;
      box-sizing: border-box;
      padding-top: 30px;
      display: flex;
      width: 100%;
      border-radius: 24px 24px 0 0;
      background: #fff;
      .active {
        .txt {
          color: #ff3a3a;
          border-bottom: 2px solid #ff3a3a;
        }
      }
      li {
        flex: 1;
        text-align: center;
        height: 28px;
        .txt {
          color: #333;
          padding: 0 6px 2px;
          font-size: 16px;
          display: inline-block;
        }
      }
    }
    .m-moreSongs {
      margin-top: 73px;
      line-height: 1.6;
      .u-title {
        color: #333;
        font-weight: 700;
        padding-left: 16px;
        font-size: 17px;
        line-height: 18px;
      }
      .m-card-list {
        margin-top: 10px;
        .item {
          padding: 7px 0 0 16px;
          height: 40px;
          .u-cover {
            float: left;
            margin: 0 10px 0 0;
            width: 40px;
            height: 40px;
            border-radius: 3px;
            overflow: hidden;
            img {
              display: inline-block;
              width: 100%;
              height: 100%;
            }
          }
          .f-fvc {
            height: 100%;
            padding-bottom: 7px;
            padding-right: 40px;
            vertical-align: top;
            position: relative;
            h3 {
              line-height: 18px;
              font-size: 15px;
              color: #333;
              margin: 0;
              font-weight: 400;
            }
            .sub {
              margin: 2px 0 0 0;
              color: #999;
            }
            .f-thide {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-break: normal;
            }
          }
        }
      }
    }
    .m_newcomm {
      position: relative;
      margin-top: 20px;
      .cmt_title {
        position: relative;
        padding: 0 0 0 16px;
        line-height: 25px;
        color: #333;
        font-size: 17px;
        font-weight: 700;
        background-color: rgba(0, 0, 0, 0);
        height: 23px;
        margin: 0;
      }
      .van-card {
        background-color: #fff;
      }
      .cmt_list {
        .van-card__thumb {
          width: 30px;
          height: 30px;
        }
        .userphoto {
          position: relative;
          img {
            display: block;
            border-radius: 50%;
            width: 30px;
            height: 30px;
          }
        }
        .cmt_content {
          position: relative;
          color: #333;
          font-size: 15px;
          line-height: 22px;
          margin-top: 5px;
          .cmt_text {
            color: #333;
            font-size: 15px;
            line-height: 22px;
            vertical-align: middle;
          }
          &::after {
            width: 200%;
            height: 200%;
            transform: scale(0.5);
            border-bottom-width: 1px;
            position: absolute;
            z-index: 2;
            content: "";
            top: 0;
            left: 0;
            pointer-events: none;
            box-sizing: border-box;
            transform-origin: top left;
            border: 0 solid rgba(0, 0, 0, 0.1);
          }
        }
        .cmt_user {
          display: inline-flex;
          max-width: 100%;
          -webkit-box-align: center;
          align-items: center;
          a {
            font-size: 14px;
            color: #666;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            -webkit-box-flex: 1;
          }
          .vipassociator {
            width: 32px;
            height: 11px;
            background: url(https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4213923139/f08a/c6ea/10ee/f7e2deef21937a1042e370c47525c956.png)
              0 0 / contain no-repeat;
          }
        }
        .cmt_like {
          width: 65px;
          height: 22px;
          line-height: 22px;
          font-size: 11px;
          color: #999;
          flex: none;
          text-align: right;
          .van-card__price {
            margin-top: 8px;
          }
          .cmt_likearea {
            display: inline-block;
            min-width: 30px;
            padding-left: 5px;
            position: absolute;
            top: 0px;
            right: 0px;
            .cmt_count {
              vertical-align: middle;
            }
            .van-icon {
              font-size: 18px;
              margin-left: 4px;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
}
</style>
